<template>
	<a-modal
		:title="title"
		:width="modalWidth"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
		:footer="null"
	>
		<a-spin :spinning="confirmLoading">
			<a-descriptions :column="1" v-if="activityInfo">
				<a-descriptions-item label="活动名称">{{ activityInfo.activityName }}</a-descriptions-item>
				<a-descriptions-item label="活动状态">
					<a-tag :color="activityInfo.status == 0 ? '#247cf0' : '#f50'">{{ activityInfo.status == 0 ? '启用' : '停用' }}</a-tag>
				</a-descriptions-item>
				<a-descriptions-item label="活动时间">{{ activityInfo.startTime }}~{{ activityInfo.endTime }}</a-descriptions-item>
				<a-descriptions-item label="音乐链接"><audio controls="controls" :src="filebaseUrl + activityInfo.musicUrl">当前浏览器不支持audio</audio></a-descriptions-item>
				<a-descriptions-item label="活动联系方式">{{ activityInfo.telPhone }}</a-descriptions-item>
				<a-descriptions-item label="浏览量">{{ activityInfo.viewCount }}</a-descriptions-item>
				<a-descriptions-item label="领取量">{{ activityInfo.drawCount }}</a-descriptions-item>
				<a-descriptions-item label="活动封面"><img class="imgbox" :src="filebaseUrl + activityInfo.coverImg" /></a-descriptions-item>
				<a-descriptions-item label="活动内容"><img v-for="(item, index) in activityInfo.picList" class="imgbox" :src="filebaseUrl + item.picUrl" /></a-descriptions-item>
			</a-descriptions>
		</a-spin>
	</a-modal>
</template>

<script>
import { api } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
export default {
	name: 'activityModal',
	mixins: [ModalMixins],
	data() {
		return {
			activityInfo: undefined
		};
	},
	created() {},
	methods: {
		show(record) {
			this.visible = true;
			if (record) {
				this.title = record.activityName + '活动详情';
				this.getActivityDetail(record.id);
			}
		},

		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleCancel() {
			this.close();
		},
		getActivityDetail(id) {
			this.confirmLoading = true;
			this.$postAction(api.getActivityDetail, {
				id
			})
				.then(res => {
					if (res.result) {
						this.activityInfo = { ...res.data };
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		}
	}
};
</script>

<style scoped lang="less">
.imgbox {
	display: block;
	width: 200px;
}
/deep/ .ant-descriptions-item > span {
	vertical-align: top;
}
</style>
